<template>
	<view class="login_content">
		<!-- 底部背景 -->
		<view id="login_bgc_id" class="login_bgc" :style="{ transform: 'translateY(' + translateY + 'rpx)' }">
			<view class="bac_row" style="width: 100%; height: 400rpx;" v-for="(item, index) in bgcList" :key="index">
				<view class="bac_row" style="width: 100%; height: 100%;" v-for="(i, j) in item" :key="j">
					<image class="bac_item" style="width: 100%; height: 100%;" mode="scaleToFill" :src="i"></image>
				</view>
			</view>
		</view>

		<!-- 透明阴影 -->
		<view class="login_center">
			<view class="login_form">
				<view class="title">欢迎登录弘兆软件</view>
				<view class="subtitle">移动开单始于2012</view>
				<view class="form_item">
					<text class="iconfont icon-user"></text>
					<input v-model="uid" placeholder-style="color: #fff;" placeholder="请输入账号" />
				</view>

				<view class="form_item">
					<text class="iconfont icon-mima"></text>
					<input v-model="password" placeholder-style="color: #fff;" type="password" placeholder="请输入密码" />
				</view>

				<checkbox-group style="text-align: right;">
					<label style="line-height: 40upx;color: #fff;font-size: 24upx;">
						<checkbox style="" value="psw" :checked='rememberPsw'
							@tap="rememberPsw =!rememberPsw" color="#FFAC60" />记住账号密码
					</label>
				</checkbox-group>

				<button @tap="bindLogin" :loading="loading" :disabled="disabledCom" :class="{ active: !disabledCom }" hover-class="hover_login">登录</button>

				<view style="text-align: center;margin-top: 20rpx; font-size: 25rpx;" @tap="openRegister">扫码配置网络</view>

			</view>

		</view>

		<uni-popup ref="configPopup" :mask-click="false" type="bottom">
			<view class="config_popup">
				<view class="config_title">服务/更新地址配置</view>
				<view class="config_item">
					<text>服务地址:</text>
					<input type="text" v-model="baseUrl" />
					<text @click="updateAdd('baseUrl')" class="iconfont icon-saoma"></text>
				</view>

				<view class="config_item">
					<text>更新地址:</text>
					<input type="text" v-model="updateUrl" />
					<text @click="updateAdd('updateUrl')" class="iconfont icon-saoma"></text>
				</view>

				<view class="config_button">
					<button @click="save" hover-class="hover_save">确认</button>
					<button @click="close" >取消</button>
				</view>
			</view>
		</uni-popup>

	</view>
</template>
<script>
	import Http from '@/service/api'
	import Base64 from "../../utils/base.js";
	const base64 = new Base64()
	export default {
		data() {
			return {
				token: '',
				rememberPsw: true,
				uid: '1001',
				password: '123',
				customId: '',
				dk: '',
				loading: false,
				qx: '',
				baseUrl: '', // 服务地址  jinmiaompro.ywhzsoft.com/JinMiaoPbkdTest
				updateUrl: '', // 更新地址
				Version:'',

				bgcList: [
					['../../static/login/1.jpg',
					'../../static/login/2.jpg',
					'../../static/login/3.jpg',],
					['../../static/login/4.jpg',
					'../../static/login/5.jpg',
					'../../static/login/6.jpg',],
					['../../static/login/7.jpg',
					'../../static/login/8.jpg',
					'../../static/login/9.jpg',],
					['../../static/login/10.jpg',
					'../../static/login/11.jpg',
					'../../static/login/12.jpg',],
					['../../static/login/13.jpg',
					'../../static/login/14.jpg',
					'../../static/login/15.jpg',],
				],
				translateY: 0,
				scrollSpeed: 1,  // 每秒滚动的像素
				intervalId: null,  // 定时器ID，用于清除定时器

			};
		},
		computed: {
			disabledCom() {
				if (this.uid && this.password) {
					return false
				} else {
					return true
				}
			}
		},

		onLoad() {
			//获取缓存账号
			this.dk = this.$baseURL
			this.Version = uni.getStorageSync('bbh')
			const uid = uni.getStorageSync('uid');
			const password = uni.getStorageSync('password');
			if (uid && password) {
				this.uid = uid;
				this.password = password;
			} else {
				this.uid = "1001";
				this.password = "123";
			}
			this.startScroll();  // 开始滚动

			console.log('== 配置码 baseUrl : ', uni.getStorageSync('baseUrl') )
			this.checkAccount('jinmiaompro.ywhzsoft.com/JinMiaoPbkdTest')
		},
		methods: {
			startScroll() {
				const systemInfo = uni.getSystemInfoSync();
				const screenHeight = systemInfo.screenHeight;  // 获取屏幕高度（单位：px）
				let moreHeight = 2000 - screenHeight
				// 设置定时器每隔 100 毫秒滚动一次
				this.intervalId = setInterval(() => {
					this.translateY -= this.scrollSpeed;
					// 如果图片滚动完（例如超出一定的距离后）可以进行循环，重新回到顶部
					if (this.translateY <= -moreHeight) {  // 假设图片高度是 850px
						this.translateY = -moreHeight; // 重新回到顶部
					}
				}, 100);  // 每 100 毫秒更新一次
			},
			bindLogin() {
				
				this.token = this.Random();
				if (this.uid == '') {
					uni.showToast({
						title: '请输入账号',
						icon: 'none'
					});
					return;
				}
				if (this.password == '') {
					uni.showToast({
						title: '请输入密码',
						icon: 'none'
					});
					return;
				}

				// if (this.uid == 'admin') {
				// 	uni.switchTab({
				// 		url: '../../salesPages/index/index'
				// 	})
				// } else {
				// 	uni.redirectTo({
				// 		url: '../../orderPages/index/index'
				// 	})
				// }
                // this.loading = true;
				let param = {
					uid: this.uid,
					password: this.password,
					customId: this.customId,
					LoginType: 'stores',
				}

				console.log('== 11 ', param)

				Http.login(param).then(r => {
					console.log('== r ', r)
					uni.setStorageSync('token', r.token)
					let token = r.token
					let splitToken = token.split('.')
					let info = splitToken[1].replace(/-/g, '+').replace(/_/g, '/')
					let jwt = base64.decode(info.toString())
					let arr = ((jwt.replace(/\{|}/g,'')).replace(/\"/g, "")).split(',')
					arr.some(val => {
						if(val.indexOf('movePrice') != -1) {
							let tempArr = val.split(':')
							uni.setStorageSync('movePrice',tempArr[1])
							return true
						}
					})

					//登录成功将用户名密码存储到用户本地
					if (this.rememberPsw) { //用户勾选“记住密码”
						uni.setStorageSync('uid', this.uid);
						uni.setStorageSync('password', this.password);
						uni.setStorageSync('loginUserName', r.loginUserName);
					} else { //用户没有勾选“记住密码”
						uni.removeStorageSync('uid');
						uni.removeStorageSync('password');
						uni.removeStorageSync('loginUserName');
					}
					uni.setStorageSync('loginData',r)
					if (r.LoginType == 'stores') {
						// uni.switchTab({
						// 	url: '../../salesPages/index/index'
						// })

						uni.redirectTo({
							url: './login2'
						})
					} else {
						uni.redirectTo({
							url: '../../orderPages/index/index'
						})
					}



				}).catch( err => {
					console.log('== err ', err)
				})
				

				


                
			},
			openRegister() {
                this.updateUrl = uni.getStorageSync('updateUrl') ? uni.getStorageSync('updateUrl') : ''
                this.baseUrl = uni.getStorageSync('baseUrl') ? uni.getStorageSync('baseUrl') : ''
                this.$refs.configPopup.open('center')
                return
				uni.scanCode({
					onlyFromCamera: false,
					scanType: ['qrCode'],
					success: res => {

					}
				})
			},

            save() {
                uni.setStorageSync('updateUrl', this.updateUrl);
                uni.setStorageSync('baseUrl', this.baseUrl);
                this.$refs.configPopup.close()
            },
            close() {
                this.updateUrl = uni.getStorageSync('updateUrl') ? uni.getStorageSync('updateUrl') : ''
                this.baseUrl = uni.getStorageSync('baseUrl') ? uni.getStorageSync('baseUrl') : ''
                this.$refs.configPopup.close()
            },
            updateAdd(type) {
                uni.scanCode({
					onlyFromCamera: false,
					scanType: ['qrCode', 'barCode'],
					success: res => {
                        if (res.result) {
                            this[type] = res.result
							uni.setStorageSync(`${type}`, res.result);
							if ( type == 'baseUrl' ) {
								this.checkAccount(res.result)
							}
                        }
					}
				})
            },
			checkAccount(result) { // 检验账套码
				Http.checkAccount({
					qrcode:result
				}).then(r => {  
					console.log('== r ', r)
					uni.showToast({
						title:'配置成功',
						icon:'none',
						duration:3000  
					})
					// store.isCheck = true
					this.customId = r.customId
					uni.setStorageSync('customId', r.customId)
				}).catch(err => {
					console.log('== err ', err)
					uni.showToast({
						title:err.message,
						icon:'none',
						duration:3000
					})
					// store.isCheck = false
					this.customId = ''
					uni.setStorageSync('customId','')
				})
			},

            // 
			makePhoneCall() {
				uni.makePhoneCall({
					phoneNumber: '17855898445' //仅为示例
				});
			},
			Random() {
				var time = new Date();
				var num = time.getTime() + Date.now().toString(36);
				return num;
			}

		},
		onHide() {
			clearInterval(this.intervalId)
		}
	}
</script>

<style lang="scss" scoped>
	.login_content {
		width: 100vw;
		height: 100vh;
		overflow: hidden;
		position: relative;
	}
	/* 背景 */
	.login_bgc {
		width: 100%;
		height: 100%;

		.bac_row {
			display: flex;
		}
		.bac_item {
			width: 33%;
			height: 33%;
		}
	}
	/* 灰色透明阴影 */
	.login_center {
		position: absolute;
		width: 100%;
		top: 0;
		bottom: 0;
		z-index: 1;
		background: rgba($color: #000, $alpha: 0.7);
		display: flex;
		align-items: center;
		justify-content: center;

		.login_form {
			width: 80%;
			height: 70%;
			/* background: rgba($color: #fff, $alpha: 0.5); */
			/* border: 1rpx solid rgba($color: #fff, $alpha: 0.5); */
			color: #fff;

			.title {
				text-align: center;
				font-size: 50rpx;
			}
			.subtitle {
				text-align: center;
				margin: 15rpx 0;
			}

			.form_item {
				position: relative;
				input {
					background: rgba($color: #fff, $alpha: 0.5);
					height: 80rpx;
					border-radius: 60rpx;
					padding: 1rpx 30rpx 1rpx 80rpx;
					font-size: 35rpx;
					margin-bottom: 20rpx;
				}
				.iconfont {
					position: absolute;
					height: 100%;
					display: flex;
					left: 30rpx;
					align-items: center;
					font-size: 40rpx;
				}
			}

			button {
				display: flex;
				align-items: center;
				justify-content: center;
				margin-top: 40rpx;
				color: #fff;
				font-size: 40rpx;
				background: rgba($color: #fff, $alpha: 0.5);
				height: 80rpx;
				border-radius: 60rpx;
				/* background: #FFAC60; */
				background: rgba($color: #FFAC60, $alpha: 0.5);
			}

			.hover_login {
				background: #c7874b !important;
			}

			.active {
				background: #FFAC60;
			}
		}
	}

    .config_popup {
        width: 80vw;
        background: #fff;
        border-radius: 15rpx;
        padding: 40rpx;

        .config_title {
            margin-bottom: 40rpx;
            font-size: 40rpx;
        }

        .config_item {
            display: flex;
            align-items: center;
            margin-bottom: 20rpx;
            font-size: 30rpx;
            input {
                flex: 1;
                border: 1rpx solid #ccc;
                padding: 10rpx 20rpx;
                margin: 0 20rpx;
            }
            .iconfont {
                font-size: 50rpx;
            }
        }

        .config_button {
            display: flex;
            align-items: center;
            margin-top: 40rpx;

            button {
                display: flex;
                align-items: center;
                justify-content: center;
				font-size: 30rpx;
                width: 200rpx;
                height: 80rpx;
            }

            button:nth-child(1) {
                background: #009fd9;
                color: #fff;
            }
            .hover_save {
                background: #047fac !important;
                
            }
        }
    }
</style>